<script setup lang="ts">
import { UserAPI } from "@/api/UserAPI";
import router from "@/router";
import { useUserStore } from "@/stores/userStore";
import type { LoginSing_from } from "@/types/User";
import { isDark } from "@/utils/isDark";
import { ElMessage } from "element-plus";
//获取路由信息
const route = useRoute();
//获取用户名store对象
const userStore = useUserStore();
//定义注册数据
const sign_from = reactive<LoginSing_from>({
  name: "", //用户名
  password: "", //密码
  password1: "", //确认密码
  pws: "", //图片验证码
  uuid: "",
});
// 生成uuid
function generateUUID() {
  var d = new Date().getTime();
  if (window.performance && typeof window.performance.now === "function") {
    d += performance.now(); //use high-precision timer if available
  }
  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
    /[xy]/g,
    function (c) {
      var r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
    }
  );
  return uuid;
}
//定义图片验证码
let random_img = ref("");
//获取图片验证码
async function get_random_code() {
  const uuid = generateUUID();
  sign_from.uuid = uuid;
  random_img.value = (await "http://localhost:8080/api/img_code/") + uuid + "/";
}
//获取图片验证码
get_random_code();
//用户名状态
const sign_form_name = ref();
//密码状态
const sign_form_password = ref();
//密码状态
const sign_form_password1 = ref();
//验证码状态
const sign_form_pws = ref();
//校验用户名是否重复是否符合规矩
async function Usename() {
  if (sign_from.name == "") {
    return;
  } else {
    //设置规则
    const rename = /^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){2,20}$/;
    if (rename.test(sign_from.name)) {
      const res = await UserAPI.repeatUsername(sign_from.name);
      if (res.count == 1) {
        ElMessage({
          showClose: true,
          message: "用户名重复请换一个",
          type: "error",
        });
        sign_from.name = "";
      }
    } else {
      ElMessage({
        showClose: true,
        message: "用户名为2-20位的数字,字母或中文",
        type: "error",
      });
      sign_from.name = "";
    }
  }
}
//校验密码是否符合规矩
function check_password() {
  if (sign_from.password != "") {
    let re = /^[0-9A-Za-z]{5,20}$/;
    if (re.test(sign_from.password)) {
      return;
    } else {
      ElMessage({
        showClose: true,
        message: "密码必须为5-20位的数字或字母",
        type: "error",
      });
      sign_from.password = "";
    }
  }
}
//校验两次密码是否一样
function check_password1() {
  if (sign_from.password1 != "") {
    if (sign_from.password == sign_from.password1) {
      return;
    } else {
      ElMessage({
        showClose: true,
        message: "两次密码不一致",
        type: "error",
      });
      sign_from.password1 = "";
    }
  }
}

// 监听注册状态
watch(
  () => userStore.userinfo.status,
  (status) => {
    // 如果注册成功
    if (status === "success") {
      ElMessage({
        showClose: true,
        message: userStore.userinfo.result.msg,
        type: "success",
      });
      // 跳转到注册前的页面
      router.push(route.query.return as string);
    } else if (status === "error") {
      ElMessage({
        showClose: true,
        message: userStore.userinfo.result.msg,
        type: "error",
      });
      if (userStore.userinfo.result.self === "name") {
        sign_form_name.value.focus();
      } else if (userStore.userinfo.result.self === "password") {
        sign_form_password.value.focus();
      } else if (userStore.userinfo.result.self === "password1") {
        sign_form_password1.value.focus();
      } else if (userStore.userinfo.result.self === "pws") {
        sign_form_pws.value.focus();
      }
    }
  }
);
</script>
<template>
  <BKLoginSign>
    <template v-slot:loginsign>
      <div class="login_forms">
        <input
          type="text"
          ref="sign_form_name"
          v-model.trim="sign_from.name"
          @blur="Usename"
          placeholder="请输用户名"
        />
        <input
          type="password"
          ref="sign_form_password"
          @blur="check_password"
          placeholder="请输入密码"
          v-model.trim="sign_from.password"
        />
        <input
          type="password"
          ref="sign_form_password1"
          placeholder="确认密码"
          @blur="check_password1"
          v-model.trim="sign_from.password1"
        />
        <div class="code">
          <input
            type="text"
            ref="sign_form_pws"
            placeholder="请输入验证码"
            class="sign_input"
            v-model.trim="sign_from.pws"
          />
          <img
            class="random_code"
            @click="get_random_code"
            :src="random_img"
            alt=""
          />
        </div>
        <button class="niceButton3" @click="userStore.BkSign(sign_from)">
          注册
        </button>
      </div>
      <div class="title">
        已经有一个账号了
        <router-link class="zhuce" to="/login">去登录</router-link>
        <router-link class="home" to="/">去首页</router-link>
      </div>
    </template>
  </BKLoginSign>
</template>
<style scoped lang="scss">
.niceButton3 {
  background-color: #cddc39;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  margin-top: 10px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}
.niceButton3:hover {
  background-color: #9c27b0;
  color: #fff;
}
.title {
  text-align: center;
  color: #808595;
  a {
    color: #808595;
  }

  a.active {
    color: #ff9800;
  }
  .home {
    color: #03a9f4;
  }
}

.login_forms {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;

  input {
    margin-bottom: 20px;
    border: 1px solid #f0eeee;
    outline: none;
    height: 40px;
    border-radius: 5px;
    padding-left: 20px;
    transition: all 0.3s;

    &:focus {
      border: 1px solid #ff9800;
    }
  }
  .baochi {
    position: relative;
    top: -15px;
    span {
      position: absolute;
      font-size: 13px;
      color: #ff9800;
      left: 20px;
      top: 10px;
    }
  }

  .code {
    display: flex;
    width: 100%;
    justify-content: space-between;

    input {
      width: 48%;
    }

    img {
      height: 40px;
      width: 150px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid #f0eeee;
      margin-left: 15px;
    }
  }

  .qr_code {
    height: 150px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      height: 150px;
    }

    span {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
